<template>
  <div class="container" v-loading="loading" element-loading-text="正在分析中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-form v-if="isShow1" :inline="true" :rules="rules" ref="formRef" :model="form" label-width="80px" :style="{height:formHeight+'px'}">
      <el-form-item label="分析学科" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择分析学科">
          <el-option label="数学" value="数学"></el-option>
          <el-option label="语文" value="语文"></el-option>
          <el-option label="英语" value="英语"></el-option>
          <el-option label="物理" value="物理"></el-option>
          <el-option label="化学" value="化学"></el-option>
          <el-option label="生物" value="生物"></el-option>
          <el-option label="政治" value="政治"></el-option>
          <el-option label="历史" value="历史"></el-option>
          <el-option label="地理" value="地理"></el-option>
        </el-select>

      </el-form-item>

      <el-form-item >
        <el-button  type="primary" @click="onSubmit">分析</el-button>
      </el-form-item>
    </el-form>

    <el-form v-if="isShow2" :model="form" label-width="80px" :style="{height:formHeight+'px'}">
      <el-form-item label="分析结果" prop="content">
        <el-input disabled="" type="textarea" :rows="10" v-model="form.content"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button  type="info" @click="cancel">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Analyze",
  data(){
    return{
      loading:false,
      isShow1:true,
      isShow2:false,
      form:{
        subject:'',
        content:''
      },
      rules: {
        subject: [
          { required: true, message: '请选择分析学科', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    onSubmit(){
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.loading=true
          this.$request.post('/analysis/', {subject:this.form.subject,userid:JSON.parse(localStorage.getItem("xm-user")).userid}).then(res=>{
            if(res.code==='200'){
              this.form.content=res.data
              this.isShow1=false
              this.isShow2=true
              this.$message.success('分析成功')
            }else {
              this.$message.error(res.msg)
            }
            this.loading=false
          })
        }
      })
    },
    cancel(){
      this.form.content=''
      this.isShow1=true
      this.isShow2=false
    }
  }
}
</script>

<style scoped>
.el-form{
  width: 500px;
  margin-top: 100px;
  background-color: #DEEAEF;
  padding: 40px;
  border-radius: 15px;
}
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
